<template>
  <div class="type-container">
    <el-descriptions border class="custom-descriptions">
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">申请类型</div>
        </template>
        <div class="custom-content">注销社团</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 申请信息正文 -->
  <div class="content-container">
    <el-descriptions border class="custom-descriptions">
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">社团名</div>
        </template>
        <div class="custom-content">{{ clubInfo.clubName }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">社团编号</div>
        </template>
        <div class="custom-content">{{ clubInfo.clubId }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 申请原因填写区域 -->
  <div class="reason-container">
    <el-input
        v-model="reason"
        type="textarea"
        :rows="4"
        placeholder="请输入申请原因（选填）"
    ></el-input>
  </div>

  <!-- 提交申请按钮 -->
  <div class="submit-button-container">
    <el-button type="primary" @click="submit"> 提交申请</el-button>
  </div>
</template>

<script setup lang="ts">
import {type Action, ElButton, ElInput, ElMessage, ElMessageBox} from "element-plus";
import {onMounted, ref} from "vue";
import {
  type ClubApplicationAddRequest,
  ClubApplicationControllerService,
  ClubControllerService
} from "../../../../generated";
import {useUserStore} from "../../../stores/user.ts";

interface ClubInfo {
  clubId: number;
  clubName: string;
}

const clubInfo = ref<ClubInfo>({
  clubId: 0,
  clubName: "",
});

onMounted(async () => {
  // 使用 vue-router 的 useRoute 方法获取路由信息
  const store = useUserStore();
  const res = await ClubControllerService.getClubVoById(store.managedClubId);
  if(res?.code === 0) {
    clubInfo.value.clubId = res?.data?.id as number;
    clubInfo.value.clubName = res?.data?.clubName as string;
  } else {
    ElMessage.error("信息加载错误，请重试: " + res?.message);
  }
})

const reason = ref("");

const submit = async () => {
  const store = useUserStore();
  const request = {
    userId: store.id,
    reason: reason.value,
    clubId: store.managedClubId,
  } as ClubApplicationAddRequest;

  try {
    const res = await ClubApplicationControllerService.addClubApplication(request);
    if (res.code === 0) {
      const successStr = `申请等级:社团; 申请类型: 注销社团; 申请编号: ${res.data}; 社团ID: ${store.managedClubId}`;
      ElMessageBox.alert(
          successStr,
          "提交成功",
          {
            confirmButtonText: "确定",
            callback: (action: Action) => {
              if (action === "confirm") {
                try {
                  window.close();
                } catch (e) {
                  ElMessage({
                    type: "info",
                    message: "无法自动关闭页面，请手动关闭此标签页。",
                    duration: 0,
                    showClose: true,
                  });
                }
              }
            },
          }
      );
    } else {
      const errorStr = '错误原因: ' + res.message;
      ElMessageBox.alert(errorStr, "提交失败", {
        confirmButtonText: "确定",
        callback: (action: Action) => {
          if (action === "confirm") {
            window.location.reload();  // 刷新当前页面
          }
        },
      });
    }
  } catch (error) {
    console.error("提交俱乐部申请时发生错误:", error);
    ElMessage.error("提交俱乐部申请失败，请稍后重试");
  }
};
</script>

<style scoped lang="scss">
.view-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

.type-container {
  width: 20%;
  margin-bottom: 20px;
}
.custom-label,
.custom-content {
  font-size: 15px;
}

.content-container {
  margin-top: 20px;
  margin-bottom: 40px;
}

.reason-container {
  margin-bottom: 20px;
}

.submit-button-container {
  display: flex;
  justify-content: flex-end;
}
</style>
